<template>
  <div class="__form">
    <div class="flex-start m-b-30">
      <el-button
        icon="el-icon-back"
        type="primary"
        plain
        round
        size="small"
        @click="back"
        >返回</el-button
      >
    </div>
    <div>
      <div class="title-content f-s-16 f-w-600 pa-12 m-b-20">
        <span class="m-l-25">生产属性</span>
      </div>
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="130px">
        <el-form-item label="加注机厂家" prop="supplierName">
          <el-input v-model="form.supplierName" size="large" @blur="getInfo" />
        </el-form-item>
        <el-form-item label="加注机编号" prop="macCode">
          <el-input v-model="form.macCode" size="large" @blur="getInfo" />
          <span class="c-gray m-t--5"
            >加注机的唯一身份标识，一般以大写字母+数字组合。总长度不得超过12位</span
          >
        </el-form-item>
      </el-form>

      <template v-if="showDetailFlag">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="130px"
        >
          <el-form-item label="主板型号" prop="macType">
            <app-dict-select
              placeholder="请选择主板型号"
              dict-code="filling-machine-type"
              class="m-r-10"
              :init-value="this.form.macType"
              disabled
              size="large"
              @change="
                (v) => {
                  this.form.macType = v;
                }
              "
            />
          </el-form-item>
          <el-form-item label="设备类型" prop="deviceClass">
            <app-dict-select
              placeholder="请选择设备类型"
              dict-code="filling-machine-device-class"
              class="m-r-10"
              :init-value="this.form.deviceClass"
              disabled
              size="large"
              @change="
                (v) => {
                  this.form.deviceClass = v;
                }
              "
            />
          </el-form-item>
          <el-form-item label="主板编号" prop="deviceName">
            <el-input v-model="form.deviceName" size="large" disabled />
            <span class="c-gray m-t--5"
              >加注机控制主板的唯一识别号，8位大写字母+数字组合</span
            >
          </el-form-item>
          <el-form-item label="版本密钥" prop="deviceSecret">
            <el-input v-model="form.deviceSecret" size="large" disabled />
            <span class="c-gray m-t--5"
              >跟随主板型号，同型号主板版本密钥相同，大写、小写、数字组合</span
            >
          </el-form-item>
        </el-form>

        <div class="title-content f-s-16 f-w-600 pa-12 m-b-20">
          <span class="m-l-25">基础属性</span>
        </div>
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="130px"
        >
          <el-form-item label="加注流量计" prop="fillType">
            <app-radio-group
              init-value="0"
              disabled
              dict-code="fill_type"
              @change="(v) => (this.form.fillType = v)"
            />
          </el-form-item>
          <el-form-item label="电磁阀" prop="solenoidValve">
            <el-radio v-model="form.solenoidValve" :label="0" disabled
              >无</el-radio
            >
            <el-radio v-model="form.solenoidValve" :label="1" disabled
              >单阀</el-radio
            >
            <el-radio v-model="form.solenoidValve" :label="2" disabled
              >双阀</el-radio
            >
          </el-form-item>
          <el-form-item label="读卡器" prop="hasCard">
            <el-radio v-model="form.hasCard" :label="0" disabled>无</el-radio>
            <el-radio v-model="form.hasCard" :label="1" disabled
              >插卡式</el-radio
            >
            <el-radio v-model="form.hasCard" :label="2" disabled
              >贴近式</el-radio
            >
          </el-form-item>
          <el-form-item label="灯光" prop="hasAdvert">
            <el-radio v-model="form.hasAdvert" :label="0" disabled>无</el-radio>
            <el-radio v-model="form.hasAdvert" :label="1" disabled>有</el-radio>
          </el-form-item>
          <el-form-item label="联网方式" prop="networkWay">
            <el-radio v-model="form.networkWay" :label="0" disabled
              >4G</el-radio
            >
            <el-radio v-model="form.networkWay" :label="1" disabled
              >以太网</el-radio
            >
          </el-form-item>
        </el-form>

        <div class="title-content flex-center f-s-16 f-w-600 pa-12 m-b-20">
          <span class="m-l-25">扩展属性</span>
          <div class="flex-center">
            <el-radio v-model="form.isExpand" :label="0">无</el-radio>
            <el-radio v-model="form.isExpand" :label="1">有</el-radio>
          </div>
        </div>
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="130px"
          v-show="form.isExpand === 1"
        >
          <el-form-item label="温控装置" prop="deviceType">
            <app-radio-group
              init-value="0"
              disabled
              dict-code="device_type"
              @change="(v) => (this.form.deviceType = v)"
            />
          </el-form-item>
          <el-form-item label="显示屏2" prop="displayScreen">
            <el-radio v-model="form.displayScreen" :label="0" disabled
              >无</el-radio
            >
            <el-radio v-model="form.displayScreen" :label="1" disabled
              >有</el-radio
            >
          </el-form-item>
          <el-form-item label="补液流量计" prop="hasStorage">
            <el-radio v-model="form.hasStorage" :label="0" disabled
              >无</el-radio
            >
            <el-radio v-model="form.hasStorage" :label="1" disabled
              >有</el-radio
            >
          </el-form-item>
          <el-form-item label="液位传感器" prop="hasSensor">
            <el-radio v-model="form.hasSensor" :label="0" disabled>无</el-radio>
            <el-radio v-model="form.hasSensor" :label="1" disabled
              >can型</el-radio
            >
            <el-radio v-model="form.hasSensor" :label="2" disabled
              >电流性</el-radio
            >
          </el-form-item>
          <el-form-item label="扫码摄像头" prop="camera">
            <el-radio v-model="form.camera" :label="0" disabled>无</el-radio>
            <el-radio v-model="form.camera" :label="1" disabled>有</el-radio>
          </el-form-item>
        </el-form>
        <div class="h-40px"></div>
        <el-form class="flex-center">
          <div></div>
          <el-form-item class="m-t-10">
            <el-button @click="cancel" icon="el-icon-close">取消</el-button>
            <el-button
              type="primary"
              @click="save"
              :loading="saveLoading"
              icon="el-icon-check"
              >保存</el-button
            >
          </el-form-item>
          <div></div>
        </el-form>
      </template>
      <div class="h-40px"></div>
    </div>
  </div>
</template>

<script>
import FillingMachineMotherboardModelSelect from "@/components/business/filling-machine-motherboard-model-select";
import AppDictSelect from "@/components/business/app-dict-select";
import {
  detailFromIotByMacCode,
  saveOrUpdate,
} from "@/api/business/filling-machine";
import { getRespData, msgSuccess } from "@/util/common-util";
import AppRadioGroup from "@/components/business/app-radio-group";

export default {
  name: "filling-machine-add-content",
  components: {
    AppRadioGroup,
    AppDictSelect,
    FillingMachineMotherboardModelSelect,
  },
  data() {
    return {
      saveLoading: false,
      imageUrl: "",
      showDetailFlag: false,
      form: {
        macType: "", // 主板型号
        macCode: "", // 加注机编号
        macStatus: 1,
        deviceClass: "", // 设备类型(字典)
        deviceName: "", // 主板编号 == 加注机开发名称？ 命名有点..
        deviceSecret: "", // 主板密钥

        fillType: 0,
        solenoidValve: 0, // 电磁阀
        hasCard: 0, // 读卡器
        hasAdvert: 0, // 灯光
        networkWay: 0, // 联网方式
        isExpand: 0, // 扩展属性
        deviceType: 0, // 温控装置
        displayScreen: 0, // 显示屏
        hasStorage: 0, // 补液流量计
        hasSensor: 0, // 液位传感器
        camera: 0, // 摄像头
      },
      rules: {
        macType: [
          { required: true, message: "请选择主板型号", trigger: "change" },
        ],
        deviceClass: [
          { required: true, message: "请选择设备类型", trigger: "change" },
        ],
        deviceSecret: [
          { required: true, message: "请填写主板密钥", trigger: "blur" },
        ],
        fillType: [
          { required: true, message: "请选择量计类型", trigger: "change" },
        ],
        solenoidValve: [
          { required: true, message: "请选择电磁阀", trigger: "change" },
        ],
        hasCard: [
          { required: true, message: "请选择读卡器", trigger: "change" },
        ],
        macCode: [
          { required: true, message: "请填写加注机编号", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        deviceName: [
          { required: true, message: "请填写主板编号", trigger: "blur" },
          { min: 8, message: "至少8个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    back(flag) {
      this.$emit("back", flag);
    },
    cancel() {
      this.back();
    },
    getInfo() {
      detailFromIotByMacCode(this.form.macCode, this.form.supplierName).then(
        (res) => {
          this.showDetailFlag = true;
          const data = getRespData(res);
          this.form.macType = data.macType; // 主板型号
          this.form.macStatus = data.macStatus;
          this.form.deviceClass = data.deviceClass; // 设备类型(字典)
          this.form.deviceName = data.deviceName; // 主板编号 == 加注机开发名称？ 命名有点..
          this.form.deviceSecret = data.deviceSecret; // 主板密钥
          this.form.fillType = data.fillType;
          this.form.solenoidValve = data.solenoidValve; // 电磁阀
          this.form.hasCard = data.hasCard; // 读卡器
          this.form.hasAdvert = data.hasAdvert; // 灯光
          this.form.networkWay = data.networkWay; // 联网方式
          this.form.isExpand = data.isExpand; // 扩展属性
          this.form.deviceType = data.deviceType; // 温控装置
          this.form.displayScreen = data.displayScreen; // 显示屏
          this.form.hasStorage = data.hasStorage; // 补液流量计
          this.form.hasSensor = data.hasSensor; // 液位传感器
          this.form.camera = data.camera; // 摄像头
          this.form.macPrecision = data.macPrecision;
          this.form.storagePrecision = data.storagePrecision;
          this.form.zeroVoflep = data.zeroVoflep;
        }
      );
    },
    save() {
      this.saveLoading = true;
      this.form.isBasicPropertySetting = true;
      saveOrUpdate(this.form)
        .then((res) => {
          msgSuccess();
          this.back(true);
          this.saveLoading = false;
        })
        .catch(() => {
          this.saveLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.__form {
  width: 48%;
}

.title-content {
  background-color: #eeeeee;
  border-radius: 5px;
}
</style>
